<!-- 回收商品管理 -->
<template>
  <div class="table">
    <el-tabs v-model="activeName" @tab-click="handleChangeTabs">
      <el-tab-pane label="回收商品列表" name="one">
        <SearchTable ref="searchTableRef" :categoryList="categoryList" :whetherStatue="whetherStatue" v-model:formStatus="formStatus" @handleAdd="handleAdd" @handleViewEdit="handleViewEdit" />
      </el-tab-pane>
      <el-tab-pane label="回收商品详情" name="two">
        <FormTab :categoryList="categoryList" :whetherStatue="whetherStatue" :id="selectId" v-model:formStatus="formStatus" @handleInitData="clearData" @handleSuccess="handleSuccess" @handleRefresh="handleGetRecycleCategoryInfo" @handleViewEstimate="handleViewEstimate" />
      </el-tab-pane>
      <el-tab-pane label="查看估价" name="three">
        <EstimateTab :id="selectEstimateId" :estimateColumnList="estimateColumnList" :estimateList="estimateList" @handleToDetail="handleToDetail" @handleInitData="clearData" @handleSuccess="handleSuccess" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="recycledGoodsInfo">
import SearchTable from "@/components/recoveryManage/recycledGoodsInfo/SearchTable.vue";
import FormTab from "@/components/recoveryManage/recycledGoodsInfo/FormTab.vue";
import EstimateTab from "@/components/recoveryManage/recycledGoodsInfo/EstimateTab.vue";
import type { TabsMode, ViewMode, ViewModeFilter } from "@/types/common";
import type { TabsPaneContext } from "element-plus";
import { useDictData } from "@/hooks/network/useDictData";
import type { IDictData } from "@/types/dict";
import type { IRecycleCategory } from "@/types/recoveryManage/recycleCategory";
import { getRecycleCategoryInfo } from "@/utils/api/recycleCategory";
import type { IEstimate } from "@/types/recoveryManage/recycledGoodsInfo";
let { getDictData } = useDictData();
/* 是否信息 */
const whetherStatue = ref<Array<IDictData>>([]);

/* 表格状态 */
const formStatus = ref<ViewMode>("none");
/* 标签页切换 */
const activeName = ref<TabsMode>("one");
const categoryList = ref<Array<IRecycleCategory>>([]);
/* 表格子组件的引用 */
const searchTableRef = useTemplateRef("searchTableRef");
const selectId = ref(0);
const selectEstimateId = ref(0);
const estimateColumnList = ref<string[]>([]);
const estimateList = ref<IEstimate[]>([]);

/* 处理切换标签页 */
function handleChangeTabs(tab: TabsPaneContext) {
  if (tab.props.name === "two") {
    formStatus.value = "edit";
  } else if (tab.props.name === "one") {
    clearData();
  }
}

/* 清除数据 */
function clearData() {
  activeName.value = "one";
  formStatus.value = "none";
  selectId.value = 0;
  selectEstimateId.value = 0;
}

/* 处理修改成功 */
function handleSuccess() {
  searchTableRef.value?.getTableInfo();
}

/* 点击添加按钮 */
function handleAdd(code: ViewMode) {
  formStatus.value = code;
  activeName.value = "two";
}
/* 点击编辑按钮 */
function handleViewEdit(id: number, code: ViewModeFilter) {
  formStatus.value = code;
  activeName.value = "two";
  selectId.value = id;
}

/* 获取发布主体 */
function handleGetRecycleCategoryInfo() {
  getRecycleCategoryInfo<Array<IRecycleCategory>, IRecycleCategory>()
    .then(res => {
      categoryList.value = res.result;
    })
    .finally(() => {});
}

function handleViewEstimate(id: number, _estimateColumnList: string[], _estimateList: IEstimate[]) {
  activeName.value = "three";
  selectEstimateId.value = id;
  estimateColumnList.value = _estimateColumnList;
  estimateList.value = _estimateList;
}
function handleToDetail() {
  activeName.value = "two";
}

handleGetRecycleCategoryInfo();
getDictData("WHETHER", whetherStatue);
</script>

<style lang="scss" scoped></style>
